<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台用户管理</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__ADMIN__css/bootstrap.min.css" rel="stylesheet">
    <link href="__ADMIN__css/font-awesome.min93e3.css" rel="stylesheet">
    <link href="__ADMIN__css/animate.min.css" rel="stylesheet">
    <link href="__ADMIN__css/style.min.css" rel="stylesheet">
    <link href="__ADMIN__js/plugins/layer/skin/default/layer.css" rel="stylesheet">
    <link rel="stylesheet" href="__ADMIN__css/plugins/switchery/switchery.css" />
</head>
<body>
<div class="col-sm-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
         <h5>添加管理员</h5>
        </div>
        <div class="ibox-content">
            <form method="post" enctype="multipart/form-data" action="{:U('admin/save')}" id="forma" name="forma" class="form-horizontal">
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">账号</label>

                    <div class="col-sm-10">
                        <input type="text" name="username" id="username" placeholder="请输入账号" class="form-control">
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">密码</label>

                    <div class="col-sm-10">
                        <input type="text" name="password" id="password" placeholder="请输入密码" class="form-control">
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">头像上传</label>

                    <div class="col-sm-10">
                        <input type="file" name="litpic" id="litpic" class="form-control">
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">角色</label>

                    <div class="col-sm-10">
                        <select class="form-control m-b" name="pid">
                            <option value="">==请选择角色==</option>
                            <volist name="option" id="vo">
                                <option value="{$vo.id}">{$vo.title}</option>
                            </volist>
                        </select>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">真实姓名</label>

                    <div class="col-sm-10">
                        <input type="text" name="realname" id="realname" placeholder="请输入真实姓名" class="form-control">
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">状态</label>

                    <div class="col-sm-10">
                        <input type="checkbox" name="status" id="status" value="1" class="js-switch" checked />
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="col-sm-4 col-sm-offset-2">
                    <button class="btn btn-primary" type="submit">保存内容</button>
                    <button class="btn btn-white" type="reset" onclick="history.go(-1)">取消</button>
                </div>
            </form>

        </div>
    </div>
</div>
<script src="__ADMIN__js/jquery.min.js"></script>
<script src="__ADMIN__js/bootstrap.min.js"></script>
<script src="__ADMIN__js/plugins/layer/layer.min.js"></script>
<script src="__ADMIN__js/plugins/switchery/switchery.js"></script>
<script src="__ADMIN__js/plugins/validate/jquery.validate.min.js"></script>
<script src="__ADMIN__js/plugins/validate/messages_zh.min.js"></script>
<script src="__ADMIN__js/common.js"></script>
</body>
<script>
    $(function(){
        $.validator.addMethod(
                "checkname",
                function(value, element, param) {
                    if(/^[a-zA-Z0-9-_]{3,16}$/.test(value)){
                        return true;
                    }else{
                        return false;
                    }
                },""
        );

        $("#forma").validate({
            rules:{
                username:"required",
                password:{
                    required: true,
                    minlength: 5,
                    maxlength:15
                },
                realname:"required"
                /*username:{
                 required: true,
                 checkname: true
                 }*/
            },
            message:{
                username:'用户名不能为空',
                password:{
                    require:'请输入密码',
                    minlength: '密码长度不够',
                    maxlength:'密码长度过长'
                },
                realname:'真实姓名不能为空'
                /*username:{
                 required:'用户名不能为空!',
                 checkname:'用户名不合法！'
                 }*/
            },
            submitHandler:function(form){
                //没有上传图片时可以用下面这种方法，如果上传图片就要使用FormData这种方法了
                /*var objnames = $(form).serializeArray();
                var datanames = new Object();
                $.each(objnames,function(key,val){
                   datanames[val.name] = val.value;
                });*/
                var forma = new FormData(document.getElementById('forma'));//这个方法在有上传图片这一项时用，否则用上面的方法
                $.ajax({
                    url:$(form).attr('action'),//获取到form表单action的值
                    type:'post',
                    dataType:'json',
                    data:forma,//此项使用第一种方法时，值为datanames，使用第二种方法时，值为adminform
                    cache: false,
                    processData: false,  // 告诉jQuery不要去处理发送的数据
                    contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                    success:function(data){
                        console.log(data.status);
                        if(data.status > 0){
                            common.error(data.msg);
                        }else{
                            common.success(data.msg,'{:U('admin/index')}');
                        }
                    }
                });
            }
        });
    });
    var elem = document.querySelector('.js-switch');
    var switchery = new Switchery(elem, { });
</script>
</html>
